<template>
    <div>
        <el-row type="flex" justify="space-between">
            <el-col :md="12" :lg="12">
                <el-alert
                title="通过文字颜色来表示显示状态, 红色表示隐藏, 绿色表示显示中."
                type="info"
                :closable="false"
                show-icon>
                </el-alert>
                <el-divider></el-divider>
                <div class="filter-container">
                    <el-form label-position="left" :inline="true">
                        <el-form-item label="状态">
                            <el-select v-model="search.status" clearable class="filter-item" placeholder="状态筛选" style="width: 120px;">
                                <el-option
                                    v-for="(item, index) in options.status"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="pageNo = 1;handleSearch()">刷新</el-button>
                            <el-button class="filter-item" icon="el-icon-plus" type="primary" @click="create" plain>添加</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <vxe-table
                    :loading="loading"
                    ref="xTable"
                    stripe
                    border
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    class="text-center"
                    :row-class-name="tableRowClassName"
                    @checkbox-all="handleSelectionChange"
                    @checkbox-change="handleSelectionChange">
                    <vxe-table-column type="checkbox" width="40"/>
                    <vxe-table-column title="ID" field="id" width="50"/>
                    <vxe-table-column title="类型" field="type" width="50"/>
                    <vxe-table-column title="排序" field="sort" width="60"/>
                    <vxe-table-column title="标题" field="title" show-overflow/>
                    <vxe-table-column title="图片" field="thumb" width="160">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.thumb" :previewSrcList="[scope.row.thumb]"  v-if="scope.row.thumb.length > 10" lazy></el-image>
                        </template>
                    </vxe-table-column>
    <!--                <vxe-table-column title="内容" field="content" min-width="150" show-tooltip-when-overflow/>-->
<!--                    <vxe-table-column title="显示" field="status" width="60" formatter="formatBoolText"/>-->
                    <vxe-table-column title="更新时间" field="updated_at" width="140"/>
                    <vxe-table-column title="操 作" width="150px">
                        <template slot-scope="scope">
                            <el-button
                                type="primary"
                                @click="edit(scope.row)">
                                编辑
                            </el-button>
                            <destroy-confirm
                                route="notice/Destroy"
                                :primary="scope.row.id"
                                @success="handleSearch">
                            </destroy-confirm>
                        </template>
                    </vxe-table-column>
                </vxe-table>

                <div class="mt-10 pull-left">
                    <destroy-multiple
                        route="notice/DestroyMultiple"
                        :selected="selected"
                        @success="handleSearch">
                        <el-button type="danger" plain>删除选中</el-button>
                    </destroy-multiple>
                </div>

                <el-pagination
                    class="pull-right"
                    background
                    :current-page.sync="pageNo"
                    :page-sizes="pageOptions.pageSizesList"
                    :page-size="pageSize"
                    :layout="pageOptions.layout"
                    :total="totalDataNumber"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </el-col>

            <el-col :md="12" :lg="10">
                <div class="screen">
                    <h4>演示部分, 仅供参考</h4>
                    <el-tabs type="border-card" stretch tab-position="left">
                        <el-tab-pane :label="item.title" v-for="item in tableData" :key="item.id">
                            <el-image :src="item.thumb" v-if="item.thumb"></el-image>
                            <div v-html="item.content" class="screen-body"></div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>

        </el-row>

        <el-dialog
            :title="form.data && form.data.id ? '编辑' : '添加'"
            :visible.sync="form.show"
            width="40%"
            :append-to-body="true"
            center>
            <dialog-form
                :data="form.data"
                v-on:submit="onFormSubmit"
                v-on:cancel="form.show = false">
            </dialog-form>
        </el-dialog>

    </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import dialogForm from './form'
export default {
    components: {
        dialogForm,
    },
    data() {
        return {
            search: {
                source: '',
                status: '',
            },
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 20,
            totalDataNumber: 0,
            pageOptions: this.$store.state.backend.pageOptions,
            options: this.$store.state.notice.options,
            form: {
                data: {},
                show: false,
            },
        }
    },
    computed: {

    },
    // watch: {
    //     '$route' (val) {
    //         if (val.name === 'notice.index') {
    //             this.initData();
    //         } else {
    //             this.stopRefreshTimeout();
    //         }
    //     }
    // },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val.records.map(v => v.id);
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });

            this.$store.dispatch('notice/Lists', filter).then(res => {
                this.tableData = res.data.data;
                this.$refs.xTable.reloadData(this.tableData);
                this.totalDataNumber = res.data.meta.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.handleSearch();
        },
        create() {
            this.form.data = {};
            this.form.show = true;
        },
        edit(row) {
            this.form.data = row;
            this.form.show = true;
        },
        onFormSubmit() {
            this.form.show = false;
            this.handleSearch();
        },
        update(val, field, id) {
            let obj = {
                id: id,
            };
            obj[field] = val;
            this.$confirm('是否确认?', '提示', {
                confirmButtonText: '是',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading = true;
                this.$store.dispatch('notice/Update', obj).then(res => {
                    this.$message.success(res.data.message);
                }).finally(() => {
                    this.loading = false;
                })
            }).catch(() => {
                this.handleSearch();
            });
        },
        tableRowClassName({row, rowIndex}) {
            if (row.status) return 'color-success';
            return 'color-danger';
        },
    },
    created() {
        this.initData();
    },
}
</script>

<style lang="scss" scoped>
.screen {
    word-break: break-word;
    .el-tab-pane {
        zoom: 0.8;
        height: calc(100vw / 24 * 9 * 0.76);
        overflow-y: auto;
    }
    ::v-deep .screen-body {
        h1 {
            font-size: 2em;
            font-weight: bold;
        }
        img {
            max-width: 100%;
        }
    }
}
</style>

